<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>GPS确认列表</b></el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main">
      <!--工具条-->
      <el-form :inline="true" :model="filters">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form-item>
            <span>GPS厂家：</span>&nbsp;&nbsp;
            <el-select v-model="GPS_factory" placeholder="请选择">
              <el-option
                v-for="item in GPS_factories"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>业务员：</span>
            <el-select v-model="salesman" placeholder="请选择">
              <el-option
                v-for="item in salesmen"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>业务部门：</span>
            <el-select v-model="department" placeholder="请选择">
              <el-option
                v-for="item in departments"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item>
            <el-input size="35px" v-model="filters.name" placeholder="请输入姓名/身份证号/车牌号/手机号码" style="min-width: 240px;" icon="search"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getUser">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-form>

      <!--列表-->
      <el-table :data="books" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                style="width: 100%;">
        <!-- <el-table-column type="selection" width="55" ></el-table-column>
         <el-table-column type="index" width="60"></el-table-column>-->
        <el-table-column prop="custom_id" label="客户编号" ></el-table-column>
        <el-table-column prop="name" label="姓名" ></el-table-column>
        <el-table-column prop="author" label="身份证号" width="120" ></el-table-column>
        <el-table-column prop="publishAt" label="车型" width="120" ></el-table-column>
        <el-table-column prop="publishAt" label="贷款额度" width="120" ></el-table-column>
        <el-table-column prop="publishAt" label="业务部" width="120" ></el-table-column>
        <el-table-column prop="publishAt" label="业务员" width="120"></el-table-column>
        <el-table-column prop="publishAt" label="GPS编号" width="120"></el-table-column>
        <el-table-column prop="publishAt" label="GPS厂家" width="120"></el-table-column>
        <el-table-column prop="options" label="操作" min-width="180">
          <template scope="scope">
            <el-button @click="checkUp" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">确认</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
                       style="text-align: center;margin-top: 20px">
        </el-pagination>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
  import util from '../../common/util'
  import {reqGetBookListPage, reqDeleteBook, reqEditBook, reqBatchDeleteBook, reqAddBook} from '../../api/api';
  import ElForm from "../../../node_modules/element-ui/packages/form/src/form.vue";

  export default{
    components: {ElForm},
    data(){
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        filters: {
          name: ''
        },
        books: [],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [], //列表选中列

        editForm: {
          id: 0,
          name: '',
          author: '',
          publishAt: '',
          description: ''
        },

        addForm: {
          name: '',
          author: '',
          publishAt: '',
          description: ''
        }
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.page = val;
        this.getBooks();
      },
      checkUp:function () {
        this.$router.push("/assetprotection/GPS_detail")
      },
      //获取用户列表
      getBooks() {
        let para = {
          page: this.page,
          name: this.filters.name
        };
        this.listLoading = true;
        //NProgress.start();
        reqGetBookListPage(para).then((res) => {
          this.total = res.data.total;
          this.books = res.data.books;
          this.listLoading = false;
          //NProgress.done();
        })
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
    },
    mounted() {
      this.getBooks();
    }
  }
</script>

<style>
  /* .demo-table-expand label {
     font-weight: bold;
   }*/
</style>
